<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({//不使用对象的时候直接new： new Vue({
                el:'#box',//数据需要释放哪里——选择器
                data:{
                    arr:['apple','pear','orange','banana'],
                    json:{a:'apple',b:'pear',c:'orange',d:'banana'}
                },//传入的数据
                methods:{
                    add:function () {
                        alert(this);//[object Obect]
                        alert(this.arr);//apple,pear,orange,banana
                        this.arr.push('watermelon');//添加
                    }
                }//方法
            });//得到对象C
        };
    </script>
</head>
<body>
<div id="box">
    <!--没有框架vue的写法-->
    <!--<input type="button" value="按钮" onclick="alert(1)">-->

    <!--show是一个方法，注意在vue里方法的写法-->
    <input type="button" value="按钮" v-on:click="add()">
    <br>
    <ul>
        <li v-for="value in arr">
            {{value}}
            <!--实现在水果列表项最后一个添加一个水果-->
        </li>
    </ul>
</div>
</body>
</html>